<template>
  <div id="wrap">
    <!-- 图片列表 -->
    <div class="img-list">
      <img src="@/assets/img/1.jpg" />
      <img src="@/assets/img/2.jpg" />
      <img src="@/assets/img/3.jpg" />
      <!-- <img src="https://s1.ax1x.com/2020/10/11/0gbKoV.jpg" />
      <img src="https://s1.ax1x.com/2020/10/11/0gb7Os.jpg" /> -->
    </div>

    <!-- 小箭头 -->
    <div class="arrow">
      <a href="javascript:;" class="left">&lt;</a>
      <a href="javascript:;" class="right">&gt;</a>
    </div>

    <!-- 小圆点 -->
    <ul class="circle-list">
      <li class="circle active" data-n="0"></li>
      <li class="circle" data-n="1"></li>
      <li class="circle" data-n="2"></li>
      <!-- <li class="circle" data-n="3"></li>
      <li class="circle" data-n="4"></li> -->
    </ul>
  </div>
</template>

<script>
  export default {
    mounted() {
      // 获取轮播图容器宽度
      let wrapWidth = document.querySelector("#wrap").offsetWidth;
      console.log(wrapWidth);
      // 获取左右按钮和图片列表
      let oLeft = document.querySelector(".left");
      let oRight = document.querySelector(".right");
      let oImgList = document.querySelector(".img-list");
      console.log(oImgList);
      //克隆第一张图片
      let clonefirstImg = oImgList.firstElementChild.cloneNode();

      console.log(clonefirstImg);
      //将第一张图片添加至图片列表的末尾
      oImgList.appendChild(clonefirstImg);

      // 图片索引 代表当前是第几张图片  index:0代表第一张图片
      let index = 0;

      // 设置函数节流锁
      let lock = true;
      function handleRightBtn() {
        if (!lock) return;
        index++;
        // 1798是图片的宽度
        oImgList.style.left = index * -wrapWidth + "px";
        // 为什么要加过渡? 因为切换到了最后一张假图时会将过渡去掉
        oImgList.style.transition = "0.5s ease";

        // index 为4时代表切换到了假图
        if (index === 3) {
          index = 0;
          setTimeout(() => {
            oImgList.style.left = 0;
            // 取消过渡 500毫秒之后切换第一张
            oImgList.style.transition = "none";
          }, 500);
        }

        // 设置小圆点的高亮
        setCircles();
        // 关锁
        lock = false;
        setTimeout(() => {
          lock = true;
        }, 500);
      }

      // 右按钮的实现
      oRight.addEventListener("click", handleRightBtn);

      // 左按钮的实现  瞬间切换到假图然后拉到真实最后一张图片
      oLeft.addEventListener("click", () => {
        if (!lock) return;
        index--;
        if (index === -1) {
          oImgList.style.left = 5 * -wrapWidth + "px";
          oImgList.style.transition = "none";
          index = 4;
          setTimeout(() => {
            oImgList.style.left = index * -wrapWidth + "px";
            oImgList.style.transition = "0.5s ease";
          }, 0);
        } else {
          oImgList.style.left = index * -wrapWidth + "px";
        }

        // 设置小圆点的高亮
        setCircles();

        lock = false;
        setTimeout(() => {
          lock = true;
        }, 500);
      });

      // 获取五个小圆点
      const circles = document.querySelectorAll(".circle");

      // 小圆点高亮的显示
      function setCircles() {
        for (let i = 0; i < circles.length; i++) {
          if (i === index) {
            circles[i].classList.add("active");
          } else {
            circles[i].classList.remove("active");
          }
        }
      }

      // 小圆点点击切换图片 使用事件代理
      const oCircle = document.querySelector(".circle-list");
      oCircle.addEventListener("click", (e) => {
        // 当我点击小圆点的时候
        if (e.target.nodeName.toLowerCase() === "li") {
          // 当前元素的data-n对应得值 和index一一对应
          const n = Number(e.target.getAttribute("data-n"));
          index = n;
          setCircles();
          oImgList.style.transition = "0.5s ease";
          oImgList.style.left = index * -wrapWidth + "px";
        }
      });

      // 自动轮播
      let autoplay = setInterval(handleRightBtn, 2000);
      const oWrap = document.getElementById("wrap");
      // 移入停止轮播
      oWrap.addEventListener("mouseenter", () => {
        clearInterval(autoplay);
      });
      // 移出继续轮播
      oWrap.addEventListener("mouseleave", () => {
        // 设表先关
        clearInterval(autoplay);
        autoplay = setInterval(handleRightBtn, 2000);
      });
    },
  };
</script>

<style scoped>
  ul {
    list-style: none;
  }

  /* 轮播图区域大小 */
  #wrap {
    overflow: hidden;
    position: relative;
    height: 678px;
    width: 100%;
  }

  #wrap .img-list {
    display: flex;
    position: relative;
    left: 0px;
    width: 100%;
    height: 100%;
    transition: 0.5s ease;
  }

  #wrap .img-list img {
    width: 100%;
    cursor: pointer;
  }

  #wrap a {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    display: block;
    width: 40px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    user-select: none;
    font-size: 30px;
    text-align: center;
    line-height: 70px;
    text-decoration: none;
  }

  #wrap a.left {
    left: 0;
  }

  #wrap a.right {
    right: 0;
  }

  .circle-list {
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 240px;
    height: 40px;
    z-index: 8;
  }
  .circle-list > .circle {
    margin: 0 5px;
    width: 30px;
    height: 30px;
    background-color: #ecf0f1;
    border-radius: 50%;
  }

  .circle-list > .circle.active {
    background-color: #e74c3c;
  }
</style>
